CSS (Cascading Style Sheet-Basamaklı Stil Şablonu) HTML kodlarıyla oluşturulan web sitelerinin daha güzel görünmesini sağlamak için kullanılır. Bir yazının büyüklüğü, fontu, rengi veya bir resmin web sayfasındaki konumu vb. gibi sayfada bulunan bütün içerikler CSS kodlar sayesinde biçimlendirilir. CSS, sadece HTML ile yapılamayacak bir çok özelliği de bünyesinde barındırır. Bir web sayfasının genişliği değiştirildiğinde sayfa içerisindeki nesnelerin biçimlendirmesini değiştirmek bu özelliklerinden bir tanesidir. Günümüzde mobil cihazların kullanımının çok fazla arması, yazılan web sitelerinin farklı boyutlardaki cihazlarda düzgün görüntülenebilmesi gerekliliğini doğurmuştur. Bu gereklilik CSS ile giderilmektedir. Görsel manada güzel web siteleri oluşturmak için CSS kullanmak kaçınılmazdır. Bir web sayfası yapmak için HTML ile birlikte CSS bilmek te gerekmektedir. CSS ile Web Tasarımı - 302 dersinde adım adım CSS kodlarının yapısı anlatılmaktadır. CSS ile Web Tasarımı-302 dersinde, HTML5 ile Web Tasarımı – 301 dersinde oluşturulan örnek web sitesinin görsel açıdan güzelleştirilmesi ayrıntılı bir şekilde anlatılmaktadır. CSS ile Web Tasarımı - 301 dersini tamamlayan birisi bir web sitesini CSS kodlarıyla biçimlendirebilecek bilgi ve beceriye sahip olacaktır.
Bu etkinlikte "CSS nedir, nasıl kullanılır?" sorularını yanıtlayacaksın. Sayfa dizaynının nasıl olacağına karar vereceksin.
CSS kodları yazmaya başlayacaksın.
2
Web Sayfasını Biçimlendirelim
Bu etkinlikte Margin kodunu öğreneceksin.
Padding kodunu öğreneceksin.
Sayfanın arka plan rengi ve yazı fontunu değiştireceksin.
3
Özel Referans Noktaları Oluşturalım
Bu etkinlikte ID ve Class kavramını öğreneceksin.
ID ve Class değerlerine göre CSS kodları nasıl yazacağını öğreneceksin.
Web sayfası için ID ve Class tanımlamaları yapacaksın.
4
Başlık ve Menüyü Biçimlendirelim
Bu etkinlikte sayfa başlığını biçimlendireceksin.
Menüyü biçimlendireceksin.
5
Makaleyi Biçimlendirelim
Bu etkinlikte ""makale"" alanlarını biçimlendireceksin.
Makale başlıklarını biçimlendireceksin.
Makale alt alanlarını biçimlendireceksin.
6
Listeyi Biçimlendirelim
Bu etkinlikte makale içeriğini ve liste alanını biçimlendireceksin.
7
Reklam Alanını Biçimlendirelim
Bu etkinlikte "reklam" alanının yerine değiştireceksin.
Reklam alanının kenar boşluklarını biçimlendireceksin.
8
Hakkımızda Alanını Biçimlendirelim
Bu etkinlikte ""hakkımızda"" alanını biçimlendireceksin.
Resimleri biçimlendireceksin.
9
Iletişim Alanını Biçimlendirelim 1
Bu etkinlikte ""iletişim"" alanını biçimlendireceksin.
İletişim formu alanını biçimlendireceksin.
10
Iletişim Alanını Biçimlendirelim 2
Bu etkinlikte "metin kutusunu" biçimlendireceksin. Makale başlıklarını biçimlendireceksin. Form nesnelerini biçimlendireceksin.
11
Sayfa Alt Alanı
Bu etkinlikte sayfa alt alanını biçimlendireceksin.
Tüm alanlarını kapsayan yeni bir alan ekleyeceksin.
12
Duyarlı Web Tasarımı Kavramı
Bu etkinlikte "Responsive web tasarımı nedir?" sorusunu cevaplayacaksın.
"Responive tasarım nasıl yapılır?" sorusunu cevaplayacaksın.
Izgara yöntemi nedir sorusunu cevaplayacaksın.
13
Sütunlu Alanlar
Bu etkinlikte sütunlu yapı için CSS tanımlamaları yapacaksın.
Web sayfasını sütunlara ayıracaksın.
14
Düzenleme Çalışmaları
Bu etkinlikte sütunlu yapıyla birlikte meydana gelen bozulmaları düzelteceksin.
15
Responsive Tasarım
Bu etkinlikte mobil görünümde sütun genişliklerini belirleyeceksin.
Reklam alanını gizleyeceksin.
İletişim formunun genişliğini ayarlayacaksın.
